<template>
	<div>
		<div class="main_operation">
			<div class="operation_left">
			</div>
      <div class="operation_right">
        <span class="fxBox" style="width: 40px;">日期:</span>
        <a-range-picker style="width: 220px" class="mr5"  @change="onDateChange" />
        <span class="fxBox" style="width: 40px;">设备:</span>
        <a-select allowClear v-model="formList.equipment_id" style="width: 250px" placeholder="请选择设备">
          <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
        </a-select>
        <span class="fxBox" style="width: 40px;">品名:</span>
        <a-select allowClear class="mr10" v-model="formList.goods_id" style="width: 200px" placeholder="请选择品名">
          <a-select-option v-for="item in goodsAllData" :value="item.id" :key="item.id">{{item.goods_name}}</a-select-option>
        </a-select>
        <a-button class="mr10" type="primary" @click="()=>{page=1;changeData()}">搜索</a-button>
        <!-- <a-button class="mr10" type="primary">下载数据</a-button> -->
      </div>
		</div>
		<a-alert v-if="testAlert" :message="textAlert" type="success" banner showIcon />
		<div style="height: 37px;" v-else></div>
		<!-- <a-alert v-else message="检验" type="info" showIcon /> -->
		<div class="main">
      <a-spin :spinning="tableLoad">
        <div v-if="dataLists == undefined || dataLists.length == 0 || dataLists.data.length == 0" class="ant-table-placeholder">无数据</div>
        <a-card v-else :bordered="false">
        	<a-card-grid  style="width:100%;padding: 5px;textAlign:'center'">
        		<div style="max-height: ;overflow-y: scroll;">
              <table class="tableBox">
              	<tr class="title">
                  <th style="width: 40px;">序号</th>
              		<th>品名</th>
              		<th>设备名称</th>                  
              		<th>车号</th>
              		<th>数量</th>
              		<th>登记人</th>
              		<th>登记时间</th>
              		<th>操作</th>
              	</tr>
              </table>
            </div>
            <div style="max-height: 500px;overflow-y: scroll;">
              <table class="tableBox" >
                  <tr v-for="(item,i) in dataLists.data" :key="item.id">
                    <td style="width: 40px;" :title="i+1">{{i+1}}</td>
                    <td :title="item.goods_name">{{item.goods_name}}</td>
                    <td :title="item.equipment_name">{{item.equipment_name}}</td>
                    <td :title="item.car_num">{{item.car_num}}</td>
                    <td :title="item.number">{{item.number}}</td>
                    <td :title="item.note_taker">{{item.note_taker}}</td>
                    <td :title="item.note_taker_time">{{item.note_taker_time}}</td>
                    <td><a-button v-if="routerShow($route,'stock_checkStatus')" size="small" type="primary" @click="test(item)">检验</a-button></td>
                  </tr>
              </table>
            </div>
        	</a-card-grid>
        </a-card>
        <div class="pageBox">
          <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
            :defaultCurrent="1" @change="pageChange" />
        </div>
      </a-spin>
		</div>
	</div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    export default {
        name: "quarantine",
				data() {
					return {
            /* 通用模块 */
            //列表
            tableLoad: false, //列表loading状态
            formList: { //列表信息
              check_status: 1,
              page: 1
            },
            /* 通用模块end */

						testAlert: false,
						textAlert: '检验操作成功',
            formItem: {
              id: ''
            },
					}
				},
				mounted() {
          this.goodsAll()
          this.equipmentAll()
					this.changeData()
				},
        computed: {
          ...mapState({
            Fields: state => state.checkStock.Fields,
            dataLists: state => state.checkStock.dataLists,
            requestCode: state => state.checkStock.requestCode,
            equipmentData: state => state.equipment.equipmentData,
            goodsAllData: state => state.productName.goodsAllData,//品名All列表(正式)        
          }),
        },
				methods: {
          /* 通用模块 */
          /* 接口 */
          ...mapActions({
            getLists: 'checkStock/getLists', //列表
            testing: 'checkStock/testing', //检测
            equipmentAll: 'equipment/equipmentAll', //所有设备名称
            goodsAll: 'productName/goodsAll',        //所有品名信息(正式)
          }),
          // 勾选
          onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys
          },
          // 重新获取列表数据
          changeData() {
            this.tableLoad = true
            setTimeout(() => {
              this.getLists(this.formList)
              this.tableLoad = false
              this.testAlert = false
            }, 800);
          },
          //搜索
          onSearch(val) {
            this.formList = { //列表信息
              type_name: val,
              page: 1
            }
            this.changeData()
          },
          // 页码
          pageChange(page) {
            this.formList.page = page;
            this.getLists(this.formList)
          },
          /* 通用模块end */
          //检测
					test(item) {
						if(this.testAlert) return
            this.formItem.id = item.id
            this.testing(this.formItem)
						setTimeout(()=>{
              this.textAlert = `${item.goods_name} ${this.requestCode}`
              this.testAlert = true
              this.changeData()
						}, 1000)
					},
				},
    }
</script>

<style scoped>
	.tableBox{
		width:100%;
    max-height: 500px;
    table-layout : fixed;
    text-align: center;
	}
  .tableBox tr{
  	border-bottom: 1px solid #eee;
  }
	.tableBox tr.title{
		background: #fafafa;padding: 16px;
	}
	.tableBox th{
    width: 25%;
		padding: 12px 0;
		border-bottom: 1px solid #CCCCCC;
	}
	.tableBox td{
    width: 25%;
		padding: 12px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
	}
</style>
